<template>
  <div>
    <div style="display: flex;justify-content: space-between;">
      <Breadcrumb :style="{margin: '16px 0'}">
        <BreadcrumbItem>首页</BreadcrumbItem>
        <BreadcrumbItem>学校管理</BreadcrumbItem>
        <BreadcrumbItem>学校列表</BreadcrumbItem>
      </Breadcrumb>
      <div style="display:flex;align-items:center;">
        <Button type="success" @click="refreshData" size="large"><Icon type="md-refresh" size="20" style="position:relative;top: -2px;" /> 刷新数据</Button>
      </div>
    </div>
    <Card>
      <div style="min-height: 600px">
        <Row type="flex">
          <Col span="4">
            <div class="filterCont">
              <p class="filter-name">学校名称：</p>
              <Input search v-model="filterName" placeholder="筛选学校名称" size="large" @on-search="handleFilterName"/>
            </div>
          </Col>
          <Col span="4" offset="1">
            <div class="filterCont">
              <p class="filter-trial">课程版本：</p>
              <Select v-model="filterLevel" size="large" @on-change="handleFilter">
                <Option label="全部" value="0"></Option>
                <Option label="人音小学" value="1"></Option>
                <Option label="人音初中" value="2"></Option>
                <Option label="人教小学" value="3"></Option>
                <Option label="人教初中" value="4"></Option>
              </Select>
            </div>
          </Col>
          <Col span="4" offset="1">
            <div class="filterCont">
              <p class="filter-trial">是否试用：</p>
              <Select v-model="filterTrial" size="large" @on-change="handleFilter">
                <Option label="全部" value="2"></Option>
                <Option label="非试用" value="0"></Option>
                <Option label="试用" value="1"></Option>
              </Select>
            </div>
          </Col>
          <Col span="4" offset="1">
            <div class="filterCont">
              <p class="filter-status">状态：</p>
              <Select v-model="filterStatus" size="large" @on-change="handleFilter">
                <Option label="全部" value="0"></Option>
                <Option label="已通过" value="1"></Option>
                <!-- <Option label="已驳回" value="2"></Option> -->
                <Option label="未审核" value="3"></Option>
                <Option label="已驳回" value="4"></Option>
              </Select>
            </div>
          </Col>
          <Col span="4" offset="1">
            <div class="filterCont">
              <p class="filter-trial">申请人：</p>
              <Select v-model="filterUser" size="large" @on-change="handleFilter">
                <Option label="全部" value="0"></Option>
                <Option v-for="user in userData" :key="user.id" :label="user.userName" :value="user.id"></Option>
              </Select>
            </div>
          </Col>
        </Row>
        <Divider>学校列表</Divider>
        <Table stripe :columns="authColumns ? admincolumns : usercolumns" :data="data"></Table>
        <Page
          :page-size="pageSize"
          :current="pageNo"
          :total="pageTotal"
          @on-change="pageChanged"
          style="margin-top: 30px;"
        ></Page>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      authColumns: true,
      filterTrial: '2',
      filterStatus: '0',
      filterLevel: '0',
      filterUser: '0',
      filterName: '',
      userData: [],
      admincolumns: [
        {
          type: 'index',
          align: 'center',
          width: 50
        },
        {
          title: "学校名称",
          key: "name"
        },
        {
          title: "所在区域",
          key: "areaName"
        },
        {
          title: "激活码数量",
          key: "cdkeyCount",
          width: 100
        },
        {
          title: "课程版本",
          key: "levelName",
          width: 100
        },
        {
          title: "试用版本",
          key: "isTrial",
          width: 110,
          render: (h, params) => {
            const row = params.row;
            const color = row.isTrial == 1 ? "error" : "primary";
            const text = row.isTrial == 1 ? "是" : "否";
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color,
                  size: "large"
                }
              },
              text
            );
          }
        },
        {
          title: "申请人",
          key: 'operaName'
        },
        {
          title: "申请时间",
          key: 'createTime',
          render: (h, params) => {
            const row = params.row
            const newDate = new Date(row.createTime);
            const formatDate = newDate.getFullYear() + "-" + (newDate.getMonth() + 1) + "-" + newDate.getDate() + " " + newDate.getHours() + ":" + newDate.getMinutes();
            return h('p', formatDate);
          }
        },
        {
          title: "状态",
          key: "status",
          render: (h, params) => {
            const row = params.row;
            const color = row.status == 1 ? 'success' : (row.status == 2 || row.status == 4) ? 'error' : (row.status == 3 || row.status == 5) ? 'warning' : '';
            const text = row.status == 1 ? '已通过' : row.status == 2 ? '删除' : (row.status == 3 || row.status == 5) ? '未审核' : row.status == 4 ? '已驳回' : '其他';
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color,
                  size: "large"
                }
              },
              text
            );
          }
        },
        {
          title: "管理",
          render: (h, params) => {
            const row = params.row;
            return h(
              "Button",
              {
                props: {
                  type: "primary"
                },
                on: {
                  click: () => {
                    this.$router.push('/school/detail?id=' + row.id + '&schoolId=' + row.schoolId)
                  }
                }
              },
              "查看详情"
            );
          }
        }
      ],
      usercolumns: [
        {
          type: 'index',
          align: 'center',
          width: 50
        },
        {
          title: "学校名称",
          key: "name"
        },
        {
          title: "所在区域",
          key: "areaName"
        },
        {
          title: "激活码数量",
          key: "cdkeyCount"
        },
        {
          title: "课程版本",
          key: "levelName"
        },
        {
          title: "试用版本",
          key: "isTrial",
          render: (h, params) => {
            const row = params.row;
            const color = row.isTrial == 1 ? "error" : "primary";
            const text = row.isTrial == 1 ? "是" : "否";
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color,
                  size: "large"
                }
              },
              text
            );
          }
        },
        {
          title: "状态",
          key: "status",
          render: (h, params) => {
            const row = params.row;
            const color = row.status == 1 ? 'success' : (row.status == 2 || row.status == 4) ? 'error' : (row.status == 3 || row.status == 5) ? 'warning' : '';
            const text = row.status == 1 ? '已通过' : row.status == 2 ? '删除' : (row.status == 3 || row.status == 5) ? '未审核' : row.status == 4 ? '已驳回' : '其他';
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color,
                  size: "large"
                }
              },
              text
            );
          }
        },
        {
          title: "管理",
          render: (h, params) => {
            const row = params.row;
            return h(
              "Button",
              {
                props: {
                  type: "primary"
                },
                on: {
                  click: () => {
                    this.$router.push('/school/detail?id=' + row.id + '&schoolId=' + row.schoolId)
                  }
                }
              },
              "查看详情"
            );
          }
        }
      ],
      data: [],
      pageSize: 10,
      pageNo: 1,
      pageTotal: 10
    };
  },
  methods: {
    getList(_self, url) {
      _self.$axios
        .get(url)
        .then(res => {
          if (res.data.code == 200) {
            _self.data = res.data.detail.list;
            _self.pageTotal = res.data.detail.total;
            _self.pageNo = res.data.detail.pageNum;
            _self.$Message.success('列表获取成功！')
          } else {
            if (res.data.code == 201) {
              _self.$Message.success('用户登录状态失效，请重新登陆')
              _self.$router.replace('/login')
            } else {
              _self.$Message.error(res.data.description)
            }
          }
        });
    },
    pageChanged(n) {
      let url = "/bm/opera/school/findSchoolPageList?pageNo=" + n + "&pageSize=" + this.pageSize
      if (this.filterName != '') {
        url += '&sName=' + this.filterName
      } else {
        url += this.filterTrial == '2' ? '' : ('&isTrial=' + this.filterTrial)
        url += this.filterStatus == '0' ? '' : ('&status=' + this.filterStatus)
        url += this.filterLevel == '0' ? '' : ('&levelId=' + this.filterLevel)
        url += this.filterUser == '0' ? '' : ('&operaId=' + this.filterUser)
      }

      this.$options.methods.getList(this, url)
    },
    handleFilter() {
      let url = '/bm/opera/school/findSchoolPageList?pageNo=1&pageSize=' + this.pageSize
      url += this.filterTrial == '2' ? '' : ('&isTrial=' + this.filterTrial)
      url += this.filterStatus == '0' ? '' : ('&status=' + this.filterStatus)
      url += this.filterLevel == '0' ? '' : ('&levelId=' + this.filterLevel)
      url += this.filterUser == '0' ? '' : ('&operaId=' + this.filterUser)

      this.$options.methods.getList(this, url)
    },
    handleFilterName(v) {
      let url = '/bm/opera/school/findSchoolPageList?pageNo=1&pageSize=' + this.pageSize
      url += v == '' ? '' : ('&sName=' + v)

      this.$options.methods.getList(this, url)
    },
    refreshData() {
      const url = "/bm/opera/school/findSchoolPageList?pageNo=1&pageSize=" + this.pageSize
      this.$options.methods.getList(this, url)
      this.filterTrial = '2'
      this.filterStatus = '0'
      this.filterLevel = '0'
      this.filterUser = '0'
      this.filterName = ''
    }
  },
  mounted: function() {
    this.authColumns = localStorage.getItem('userLevel') == 1

    this.$axios
      .get(
        "/bm/opera/school/findSchoolPageList?pageNo=" +
          this.pageNo +
          "&pageSize=" +
          this.pageSize
      )
      .then(res => {
        if (res.data.code == 200) {
          this.data = res.data.detail.list;
          this.pageTotal = res.data.detail.total;
        }
      });
    this.$axios.get('/bm/opera/sysuser/findSysuserList').then(res => {
      if(res.data.code == 200) {
        this.userData = res.data.detail
      }
    })
  }
};
</script>

<style lang="less">
.filterCont {
  display: flex;
  flex-direction: column;
  // align-items: center;

  p {
    margin-bottom: 10px;
  }

  // .filter-trial {
  //   width: 110px;
  // }

  // .filter-status {
  //   width: 65px;
  // }

  // .filter-name {
  //   width: 110px;
  // }
}
</style>
